<template>
  <div>
    <!-- el-image在IE下会自动加上用于兼容object-fit的类，该类的样式在没设置图片宽高是会 GG -->
    <!-- <img class="image-element" :src="imageUrl" @load="onImageLoaded" /> -->
    <el-image class="image-element" :src="imageUrl" :preview-src-list="[imageUrl]">
    </el-image>
  </div>
</template>

<script>
import { Progress } from 'element-ui'
import { mapGetters } from 'vuex'
export default {
  name: 'ImageElemnt2',
  props: {
    payload: {
      type: Object,
      required: true
    }
  },
  components: {
    ElProgress: Progress
  },
  computed: {
    ...mapGetters(['imgUrlList']),
    imageUrl () {
      return this.payload.description
    },


  },
  methods: {
    onImageLoaded (event) {
      this.$bus.$emit('image-loaded', event)
    },
    handlePreview () {
      this.$bus.$emit('image-preview', {
        url: this.imageUrl
      })
    }
  }
}
</script>

<style scoped>
.image-element {
  width: 120px;
  /* height: 250px; */
  cursor: zoom-in;
}
</style>
